<template>
	<view class="flex align-center justify-between">
		<view v-if="command<1" style="width: 100rpx;height: 100rpx;" @click="gearOne(imei, 1)">
			<image src="../../static/imgs/p1.jpg" style="width: 100rpx;height: 100rpx;"></image>
		</view>
		<view v-else style="width: 100rpx;height: 100rpx;">
			<image src="../../static/imgs/p1.jpg" style="width: 100rpx;height: 100rpx; opacity: 0.4;"></image>
		</view>
		<view v-if="command<2" style="width: 100rpx;height: 100rpx;" @click="gearTwo(imei, 2)">
			<image src="../../static/imgs/p2.jpg" style="width: 100rpx;height: 100rpx;"></image>
		</view>
		<view v-else style="width: 100rpx;height: 100rpx;">
			<image src="../../static/imgs/p2.jpg" style="width: 100rpx;height: 100rpx; opacity: 0.4;"></image>
		</view>
		<view v-if="command<3" style="width: 100rpx;height: 100rpx;" @click="gearThree(imei, 3)">
			<image src="../../static/imgs/p3.jpg" style="width: 100rpx;height: 100rpx;"></image>
		</view>
		<view v-else style="width: 100rpx;height: 100rpx;">
			<image src="../../static/imgs/p3.jpg" style="width: 100rpx;height: 100rpx; opacity: 0.4;"></image>
		</view>
		<view style="width: 100rpx;height: 100rpx;" @click="close(imei, 0)">
			<image src="../../static/imgs/reset.jpg" style="width: 100rpx;height: 100rpx;"></image>
		</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			imei: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				command: 0
			}
		},
		methods: {
			// 一档
			gearOne(imei, command) {
				if (imei === '') {
					return uni.showToast({ title: '没有选中设备', icon: 'none' })
				}
				// this.command = command;
				this.$H.post('/water/device_info/motor_state',
					{ imei: this.imei, command: command},
					{ token: true },
				).then(res => {
					console.log(res)
					this.$emit('refresh')
				})
			},
			// 二档
			gearTwo(imei, command) {
				if (imei === '') {
					return uni.showToast({ title: '没有选中设备', icon: 'none' })
				}
				// this.command = command;
				this.$H.post('/water/device_info/motor_state',
					{ imei: this.imei, command: command}, 
					{ token: true },
				).then(res => {
					console.log(res)
					this.$emit('refresh')
				})
			},
			// 三档
			gearThree(imei, command) {
				if (imei === '') {
					return uni.showToast({ title: '没有选中设备', icon: 'none' })
				}
				// this.command = command;
				this.$H.post('/water/device_info/motor_state',
					{ imei: this.imei, command: command}, 
					{ token: true },
				).then(res => {
					console.log(res)
					this.$emit('refresh')
				})
			},
			// 复位
			close(imei, command) {
				if (imei === '') {
					return uni.showToast({ title: '没有选中设备', icon: 'none' })
				}
				this.command = command;
				this.$H.post('/water/device_info/motor_state',
					{ imei: this.imei, command: command}, 
					{ token: true },
				).then(res => {
					console.log(res)
					this.$emit('refresh')
				})
			},
		}, // end methods
	}
</script>

<style>
</style>
